import React from 'react'
// 引入面包屑导航组件
import { Breadcrumb } from 'antd';
import { useLocation, Link } from 'react-router-dom';
// 导入方法,用来处理路由菜单映射对象
import { getbreadcrumbNameMap } from '@/utils/common';
import routes from '@/router/routes'
type Props = {}

export default function Appbreadcrumb({ }: Props) {
    // 定义项目中的路由映射对象, path =>导航菜单名
    const breadcrumbNameMap: Record<string, string> = getbreadcrumbNameMap(routes)

    // console.log('breadcrumbNameMap', breadcrumbNameMap);
    // {
    //     '/home': '系统首页',
    //     '/account': '账户管理',
    //     '/account/adminlist': '管理员列表',
    //      ....
    // }

    // 获取当前的路由信息对象 相当于 vue3 useRoute
    const location = useLocation(); //{pathname:/account/adminlist}
    const pathSnippets = location.pathname.split('/').filter((i) => i);
    // console.log('pathSnippets', pathSnippets); // ['home'] 或者 ['account','adminlist']

    // 获取项目中不能跳转的路由的数组
    const pathNoLinkArr = routes.filter(item => item.children)
    // console.log('pathNoLinkArr', pathNoLinkArr);

    const extraBreadcrumbItems = pathSnippets.map((_, index) => {
        const url: string = `/${pathSnippets.slice(0, index + 1).join('/')}`;
        //console.log('url', url);  // /account  和 /account/adminlist
        return {
            key: url,
            title: pathNoLinkArr.some(item => item.path == url) ?
                <> {breadcrumbNameMap[url]}</> :
                <Link to={url} > {breadcrumbNameMap[url]}</Link>,
        };
    });

    //console.log('extraBreadcrumbItems', extraBreadcrumbItems);
    const breadcrumbItems = [
        {
            title: <>仪表盘</>,
            key: '/',
        },
    ].concat(extraBreadcrumbItems);

    // console.log('breadcrumbItems', breadcrumbItems)

    return (
        <Breadcrumb items={breadcrumbItems} />
    )
}